<template>
    <div class="m_header">
        <ul class="ul_header">
            <li><a href="#">豆瓣</a></li>
            <li><a href="#">读书</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">音乐</a></li>
        </ul>
        <div class="header_content">
            <div class="container header_content_inner">
                <a href="#">豆瓣电影</a>
                <div class="searchDiv">
                    <input type="text" class=" form-control" placeholder="搜索电影、电视剧、综艺，艺人">
                    <span class=" glyphicon glyphicon-search"></span>
                </div>
            </div>
        </div>
        <div class="ul-nav-type">
            <ul class=" list-unstyled list-inline container ">
                <li><a href="#">影讯&购票</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">分析</a></li>
            </ul>
        </div>
    </div>
    
</template>

<script>
export default {
    name:"mheader"
}
</script>

<style lang="scss" scoped>
@import "../scss/common.scss";
    .m_header {
        .ul_header{
            background-color: #545652;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            li{
                float: left;
                height: 40px;
                line-height: 40px;
                margin: 0 20px;
                a{
                    color:lightgray;
                    text-decoration: none;
                    font-size: 18px;
                }
            }
        }
        .header_content{
            border-bottom: 1px solid lightblue;
            background: rgba(0, 0, 0, 0.08);
            .header_content_inner{
                @include flexbox(){
                    height: 120px;
                    align-items: center;
                }
            }
            a{
                font-size: 38px;
                color:#2676a8;
                font-weight: bold;
                text-decoration: none;
                margin: 0 30px;
            }
            .searchDiv{
                position: relative;
                width: 500px;
                >.glyphicon-search{
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    color: gray;
                }
            }
            
            
        }
        .ul-nav-type{
            background: rgba(0, 0, 0, 0.08);
            li{
                margin: 15px;
                a{
                    font-size: 20px;
                }
            }
        }
    }
</style>
